<template>
  <el-card>
    <span>任务等级：</span>
    <el-select
      v-model="value" 
      style="margin-right: 20px;"
      placeholder="任务等级"
      :disabled="checked"
      @change="selectChange"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="SearchBtn">搜索</el-button>
    <el-button  icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
    <el-checkbox style="margin-left: 20px" v-model="checked">自动滚动</el-checkbox>
    <el-divider />
    <el-row> 
      <!-- 日志 -->  
        <div id="right">
          <ul>
            <li v-for="(v, i) in log" :key="i" > 
                <div class="odiv1">{{ i + 1 }}</div>
                <div :style="{ color: v.level === 'error'? 'red' : ''}">{{ v.message }}</div> 
            </li>
            <li v-if="log.length">
              <span v-if="checked" class="log_loading">
                正在更新日志...<i class="el-icon-loading"></i>
              </span>
              <span v-else class="log_loading">
                停止更新日志
              </span>
            </li>
            <li v-if="!log.length" class="noData">暂无日志数据</li>
          </ul>
        </div>  
    </el-row>
  </el-card>
</template>

<script> 
export default {
  data() {
    return { 
      log: [], 
      log1: [], 
      options: [
        {
          label: 'error',
          value: 'error'
        },
        {
          label: 'info',
          value: 'info'
        }
      ],
      value: '', 
      timer: null,
      checked: true,
      currentId: null,
    }
  },
  watch: {
    checked: {
      handler: function (newV) { 
        console.log('newV', newV);
        if (newV) {
          this.timer = setInterval(() => {
            this.currentId && this.getlogList(this.currentId) 
            newV && this.scrollTop()
          }, 1500); 
        } else {
          clearInterval(this.timer)
        }
      }, 
      immediate: true
    }
  },
  beforeDestroy(){
     clearInterval(this.timer)
  },
  mounted() {  
    let id = this.$route.query.id
    this.currentId = id
    this.getlogList(id) 
  },
  methods: {
    getlogList(taskId){
      this.$http
      .post(`/api/cloud_log/system/get`, {
        taskId
      }).then(res => {
        if (res.success) {
          this.log = res.data.list
          this.log1 = res.data.list
        } else {
          this.$error(res.msg)
        }
        console.log(res.data.list);
      })
    },
    resetForm() {
      this.value = ''
      this.log = this.log1
      setTimeout(() => {
        this.scrollTop()
      }, 300);
    },
    scrollTop() {
      const dom = document.getElementById("right")  
      dom.scrollTo(0, dom.scrollHeight); 
    },   
    unmounted() {
      clearInterval(this.timer)
    },
    selectChange() { },
    SearchBtn() { 
      if (this.value && this.log.length) {
        this.log = this.log.filter(v=>v.level.includes(this.value))
      }
    }, 
  }
}
</script>

<style scoped lang="less">
.pagination {
  text-align: center;
  padding: 20px 0 0;
}

.left {
  height: 100%;
  border-right: 3px solid #333;
}

.wrap-flex {
  display: flex;
  align-items: center;
}

#right { 
  background-color: black;
  color: #fff;
  height: 700px;
  overflow-y: scroll;
  border-radius: 8px;
  ul {
    padding: 0;
    list-style: none;
    height: 90%;
    li {
      padding: 0;
      margin: 0;
      display: flex;
      list-style: none; 
      justify-content: flex-start;
      align-items: center;
      padding: 5px 0; 
      .odiv1 { 
        width: 80px; 
        color: red; 
        font-size: 20px;
        padding: 10px;
      }
      .log_loading {
        padding-left: 80px;
        color: yellow;
        padding-bottom: 100px;
      }
    }
    .noData {
      display: flex;
      justify-content: center;
      height: 90%;
    }
  }
  h3 {
    text-align: center;
  }
}
</style>
